<script setup>
import { ref, onMounted, useTemplateRef } from 'vue'

const el = useTemplateRef('el')
import { useIntersectionObserver } from '@vueuse/core'
import ShuangYinHao from '@/assets/svg/ShuangYinHao.vue'
import { getReviewsContentApi, getReviewsListApi } from '@/api'

const pageDesc = ref()
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const reviewsList = ref([])

const getRevirewsList = () => {
  getReviewsListApi().then((res) => {
    total.value = res.total
    reviewsList.value.push(...res.data)
  })
}

const loadMore = () => {
  if (page.value * pageSize.value >= total.value) return
  page.value = page.value + 1
  console.log('触底了！', page.value)
}

// 监听是否滚动到底部
useIntersectionObserver(
  el,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      loadMore()
    }
  },
  { threshold: 0.1 },
)

onMounted(() => {
  getReviewsContentApi().then((res) => {
    pageDesc.value = res
  })
  getRevirewsList()
})
</script>
<template>
  <div class="bg-gray-50 pb-1">
    <div class="max-w-[1200px] mx-auto pt-4 pb-20 max-[1200px]:p-3">
      <div class="bg-white mb-5 p-5">
        <div class="flex flex-col gap-4">
          <div v-html="pageDesc"></div>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4 items-start">
        <div
          class="bg-white p-5 flex flex-col gap-5"
          v-for="item in reviewsList"
          :key="item + 'reviews'"
        >
          <div class="flex justify-between items-end">
            <div class="flex gap-3 items-center">
              <div class="size-8 bg-amber-200 rounded-full overflow-hidden">
                <img :src="item.img_url" alt="" class="w-full h-full" />
              </div>
              <div class="text-sm"><a-rate :value="item.star" disabled /></div>
              <div class="text-gray-500">{{ item.show_date }}</div>
            </div>
            <ShuangYinHao color="#eee" :size="40" />
          </div>
          <div class="leading-loose">
            {{ item.content }}
          </div>
          <div class="text-right text-gray-400">{{ item.name }}</div>
        </div>
        <!-- 加载更多 -->
        <div ref="el"></div>
      </div>
    </div>
  </div>
</template>
